<template>
	<div class="publicformview">
		<!-- 档案录入变动情况 -->
		<el-dialog :visible.sync="fangjianShow" append-to-body :title="typeName" width="80%" :before-close="fangjianClose"
			style="margin-top: 60px;">
			<div class="headTop">
				<div class="xinxi">
					<el-button type="primary" size="mini" @click="handleUpdate()">录入</el-button>
				</div>
			</div>
			<el-table max-height='500px' v-loading="listLoading" :data="list" border fit highlight-current-row size="mini">
				<el-table-column align="center" label="门号" prop="buildingdoorno" width="250">
				</el-table-column>

				<el-table-column align="center" label="楼层" prop="floorno" width="80">
				</el-table-column>

				<el-table-column align="center" label="单元号" prop="apartmentno" width="80">
				</el-table-column>

				<el-table-column align="center" label="间号" prop="roomno" width="80">
				</el-table-column>

				<el-table-column align="center" label="用途" prop="use" width="80">
				</el-table-column>

				<el-table-column align="center" label="计租间" prop="rentflag" width="80">
				</el-table-column>

				<el-table-column align="center" label="面积" prop="rentarea" width="80">
				</el-table-column>

				<el-table-column align="center" label="伙用" prop="rentertotal" width="80">
					<template slot-scope="scope">
						<el-input @blur="detailpdate(scope.row)" class="detiles" v-if="isHuoyongDetile"
							v-model="scope.row.rentertotal"></el-input>
						<p @click="detileHuoyong(scope.row)" v-else>{{scope.row.rentertotal}}</p>
					</template>

				</el-table-column>

				<el-table-column align="center" label="伙用面积" prop="renterarea" width="80">
				</el-table-column>

				<el-table-column align="center" label="性质" prop="livingway" width="80">
				</el-table-column>

				<el-table-column align="center" label="自然间" prop="roomflag" width="80">
					<template slot-scope="scope">
						{{scope.row.roomflag==1?'是':'否'}}
					</template>
				</el-table-column>

				<el-table-column align="center" label="用途类别" prop="usetype" width="80">
				</el-table-column>

				<el-table-column align="center" label="租金" prop="rentprice" width="80">
				</el-table-column>

				<el-table-column align="center" label="摊后租金" prop="afterrent" width="80">
					<template slot-scope="scope">
						<el-input @blur="detailpdate(scope.row)" class="detiles" v-if="istanhouDetile"
							v-model="scope.row.afterrent"></el-input>
						<p @click="detiletanhou(scope.row)" v-else>{{scope.row.afterrent?scope.row.afterrent:0}}</p>
					</template>
				</el-table-column>

				<el-table-column align="center" label="基本租金" prop="basicrent" width="80">
				</el-table-column>

				<el-table-column align="center" label="暖气" prop="heatrent" width="80">
				</el-table-column>

				<el-table-column align="center" label="电梯" prop="elevatorrent" width="80">
				</el-table-column>

				<el-table-column align="center" label="超高" prop="overheightrent" width="80">
				</el-table-column>
				<el-table-column fixed="right" align="center" label="操作" width="180">
					<template slot-scope="scope">
						<el-button type="text" size="mini" @click="deletepdate(scope.row.id)">删除</el-button>
						<el-button type="text" size="mini" @click="detaildate(scope.row)">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="saveContents">
				<el-button type="primary" @click="fangjianClose" size="medium">确定</el-button>
			</div>
		</el-dialog>
		
		

		<!-- 档案录入变动情况 -->
		<el-dialog :visible.sync="luruPopup" append-to-body :title="typeName" width="70%" :before-close="handleClose"
			style="margin-top: 60px;">

			<div class="publicformview-new">
				<el-form :inline="true" :model="searchQuery" size="mini" ref="searchForm">
					<div class="publicformview-new-left">
						<el-form-item label="所号：" prop="blockno" label-width="80px">
							<el-select v-model="searchQuery.blockno" style="width: 100px">
								<div v-for="(item,index) in fushuList" :key="index">
									<el-option :label="item.blockno" :value="item.blockno" :key="index"></el-option>
								</div>
							</el-select>
						</el-form-item>
						<el-form-item label="门号：" prop="BuildingDoorNo" label-width="80px">
							<el-input v-model="searchQuery.BuildingDoorNo" style="width: 100px"></el-input>
						</el-form-item>
						<el-form-item label="楼层：" prop="FloorNo" label-width="80px">
							<el-input v-model="searchQuery.FloorNo" style="width: 100px"></el-input>
						</el-form-item>
						<el-form-item label="单元号：" prop="ApartmentNo" label-width="80px">
							<el-input v-model="searchQuery.ApartmentNo" style="width: 100px"></el-input>
						</el-form-item>
					</div>
				</el-form>

				<div class="publicformview-new-right">
					<el-button size="mini" type="primary" @click="sumbitCx">查询</el-button>
					<el-button size="mini" @click="resetTop">重置</el-button>
				</div>
			</div>
			
			<el-button v-if="typeName == '添加房间'" style="margin-bottom: 10px;" type="primary" @click="arrAdd" size="medium">添加</el-button>
			<el-table :data="tableData" border style="width: 100%" max-height='500px' @selection-change="selectChange">
        <el-table-column
          type="selection"
          align="center"
        >
        </el-table-column>
				<el-table-column prop="roomid" label="房间编号" width="150">
				</el-table-column>
				<el-table-column prop="buildingdoorno" label="门栋号" width="100">
				</el-table-column>
				<el-table-column prop="floorno" label="楼层" width="120">
				</el-table-column>
				<el-table-column prop="apartmentno" label="单元号" width="120">
				</el-table-column>
				<el-table-column prop="roomno" label="间号" width="120">
				</el-table-column>
				<el-table-column prop="usingarea" label="使用面积" width="120">
				</el-table-column>
				<el-table-column prop="rentarea" label="计租面积" width="120">
				</el-table-column>
				<el-table-column prop="buildingarea" label="建筑面积" width="120">
				</el-table-column>
				<el-table-column fixed="right" align="center" label="操作" width="140">
					<template slot-scope="scope" v-if='typeName=="添加房间"'>
						<el-button type="text" size="mini" @click="addUpdate(scope.row.roomid)">添加</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="saveContents">
				<el-button type="primary" @click="luruPopup = false" size="medium">返回</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import dayjs from 'dayjs'
	import {
		renterRoomList,
		roomByBlockNo,
		addRenterRoom,
		delRenterRoom,
		updRenterRoom,
		getAffiliatedByBlock,
		addAllRenterRoom
	} from '@/api/management'
	export default {
		props: {
			fangjianShow: Boolean,
			blockno: String,
			rentId: String
		},
		name: "fangwuxianzhuang",
		data() {
			return {
				listQuery: {
					pageNum: 1,
					pageSize: 20
				},
				total: 0,
				addQuery: {
					orderno: '',
					startdate: '',
					stopdate: '',
					department: '',
					content: '',
					roomcount: '',
					area: '',
					money: '',
					finishlevel: '',
					finishroomcount: '',
					finisharea: ''
				},
				list: [],
				listLoading: false,
				dialogVisible: false,
				isChanquan: true,
				type: 1,
				repairid: '',
				luruPopup: false,
				tableData: [],
				typeName: '',
				isHuoyongDetile: false,
				istanhouDetile: false,
				searchQuery: {
					BuildingDoorNo:'',
					FloorNo:'',
					ApartmentNo:'',
					blockno:''
				},
				fushuList:[],
				hebingList:[],
				arrID:[]
			};
		},

		computed: {},

		mounted() {
			this.renterRoomList()
			this.getAffiliatedByBlock()
		},

		methods: {
			// 合并外层选择器
			selectChange(e) {
				console.log(e)
			  this.hebingList = e
			
			  let arrID = []
			  e.forEach((item, index) => {
			    arrID.push(item.roomid)
			  })
			  this.arrID = arrID
			},
			getAffiliatedByBlock(){
				let data = {
					blockno:this.blockno
				}
				getAffiliatedByBlock(data).then(res=>{
					this.fushuList = res.data
				})
			},
			arrAdd(){
				let data = {
					rentId: this.rentId,
					roomIds: this.arrID
				}
				addAllRenterRoom(data).then(res=>{
					console.log(res)
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
					this.renterRoomList()
				}).catch(res=>{
					
					this.renterRoomList()
				})
			},
			detileHuoyong() {
				this.isHuoyongDetile = true
			},
			detiletanhou() {
				console.log(13)
				this.istanhouDetile = true
			},
			renterRoomList() {
				let data = {
					rentId: this.rentId
				}
				console.log(data)
				renterRoomList(data).then(res => {
					console.log(res)
					this.list = res.data
				})
			},
			handleUpdate() {
				let data = this.searchQuery
				data.blockNo =  this.blockno
				data.renterId = this.rentId
				roomByBlockNo(data).then(res => {
					this.tableData = res.data
					this.luruPopup = true
					this.typeName = '添加房间'
				})
			},
			detaildate(row) {
				console.log(row)
				this.tableData = []
				this.tableData.push(row)
				this.luruPopup = true
				this.typeName = '房间详情'
			},
			detailpdate(row) {
				updRenterRoom(row).then(res => {
					console.log(res)
					this.isHuoyongDetile = false
					this.istanhouDetile = false
					this.renterRoomList()
				})
			},
			addUpdate(roomIds) {
				let data = {
					rentId: this.rentId,
					roomIds: roomIds
				}
				addRenterRoom(data).then(res => {
					this.luruPopup = false
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
					this.renterRoomList()
				})
			},
			deletepdate(id) {
				let data = {
					id: id
				}
				delRenterRoom(data).then(res => {
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
					this.renterRoomList()
				})
			},
			save() {
				let data = this.addQuery
				data.startdate = dayjs(data.startdate).format('YYYY-MM-DD HH:mm:ss')
				data.stopdate = dayjs(data.stopdate).format('YYYY-MM-DD HH:mm:ss')
				if (this.repairid) {
					data.repairid = this.repairid
					updBlockRepair(data).then(res => {
						console.log(res)
						this.dialogVisible = false;
						this.renterRoomList()
						this.$message({
							type: 'success',
							message: '操作成功!'
						});
					})
				} else {
					addBlockRepair(data).then(res => {
						console.log(res)
						this.dialogVisible = false;
						this.renterRoomList()
						this.$message({
							type: 'success',
							message: '操作成功!'
						});
					})
				}
				this.reter()
			},
			reter() {
				this.addQuery.orderno = '',
					this.addQuery.startdate = '',
					this.addQuery.stopdate = '',
					this.addQuery.department = '',
					this.addQuery.content = '',
					this.addQuery.roomcount = '',
					this.addQuery.area = '',
					this.addQuery.money = '',
					this.addQuery.finishlevel = '',
					this.addQuery.finishroomcount = '',
					this.addQuery.finisharea = ''
			},
			handleSizeChange(val) {
				this.listQuery.pageNum = 1;
				this.listQuery.pageSize = val;
				this.renterRoomList()
			},
			handleCurrentChange(val) {
				this.listQuery.pageNum = val;
				this.renterRoomList()
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
						this.reter()
					})
					.catch(_ => {});
			},
			// 选择类型
			selectButton(type) {
				this.type = type
			},
			returns() {
				this.$router.go(-1)
			},
			fangjianClose() {
				this.$emit('fangjianClose')
			},
			sumbitCx() {
				this.handleUpdate()
			},
			resetTop() {
				this.searchQuery.BuildingDoorNo='',
				this.searchQuery.FloorNo='',
				this.searchQuery.ApartmentNo=''
			}
		},
	};
</script>

<style scoped>
	.headTop {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.xinxi {
			display: flex;
			width: 800px;
		}
	}

	.el-form-item {
		justify-content: start !important;
	}

	.el-select {
		width: 180px;
	}

	.el-date-picker {
		width: 180px;
	}

	.bottomTop {
		width: 100%;
		display: flex;
		justify-content: end;
	}

	.tabButton {
		background: #EFF2F7;
		color: #333333;
		border: none;
	}

	.fangwuList {
		width: 100%;
		background-color: #F5F5F5;
		margin: 3px auto 0;
		overflow: hidden;
	}

	.fangwuText {
		font-weight: bold;
		font-size: 16px;
		color: #008C93;
		margin-top: 20px;
		margin-left: 26px;
	}

	.saveContent {
		width: 100%;
		display: flex;
		justify-content: end;
		margin-top: 20px;
		padding-bottom: 20px;
	}

	.saveContents {
		width: 100%;
		display: flex;
		margin-top: 20px;
		padding-bottom: 20px;
		justify-content: end;
	}

	.headTop {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.xinxi {
			display: flex;
			width: 800px;
		}
	}
</style>